<template>
  <div id="app" :class="$route.meta.isDetails && !$isZsjxApp?'isADFooter':''">
    <template v-if="isShowApp">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" v-wechat-title="$route.meta.title" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" v-wechat-title="$route.meta.title" />
      <van-tabbar
        route
        v-model="active"
        v-if="
          $route.meta.title == '掌上精选' ||
          $route.meta.title == '达人分析' ||
          $route.meta.title == '商品分析' ||
          $route.meta.title == '直播分析' ||
          $route.meta.title == '我的'
        "
      >
        <van-tabbar-item replace to="/">
          <span>首页</span>
          <template #icon="props">
            <img
              :src="
                props.active
                  ? require('./assets/two/a-foot_03.png')
                  : require('./assets/two/footer_03.png')
              "
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/goods">
          <span>商品</span>
          <template #icon="props">
            <img
              :src="
                props.active
                  ? require('./assets/two/a-goods_03.png')
                  : require('./assets/two/footer_07.png')
              "
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/talent">
          <span>达人</span>
          <template #icon="props">
            <img
              :src="
                props.active
                  ? require('@/assets/two/a-footer_05.png')
                  : require('@/assets/two/foot_05.png')
              "
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/liveRank">
          <span>直播</span>
          <template #icon="props">
            <img
              :src="
                props.active
                  ? require('./assets/three/live.png')
                  : require('./assets/two/footer_12.png')
              "
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/user" :dot="Boolean($store.state.unreadMsg)">
          <span>我的</span>
          <template #icon="props">
            <img
              :src="
                props.active
                  ? require('./assets/two/a-main_03.png')
                  : require('./assets/two/footer_09.png')
              "
            />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </template>
    <!-- <div class="app_loading" v-else>
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>-->
    <PageLoading v-else />
    <!-- 授权页面弹窗 -->
    <!-- <div class="tg_authorizatio" v-if="showAuthorize">
      <div class="tg_a_button" @click="authorize">微信一键授权登陆</div>
      <div class="tg_a_text">登录即表示同意<span class="tg_a_clause" @click="$router.push('/termsOfService')">《服务条款》</span>和<span class="tg_a_clause" @click="$router.push('/privacyClause')">《隐私条款》</span></div>
    </div>-->
    <!-- 底部广告栏--详情页才展示 -->
    <ADFooter v-show="$route.meta.isDetails && !$isZsjxApp"/>
    <!-- 新注册用户自动获得3天svip弹框 -->
    <!-- <van-dialog v-if="!$isZsjxApp" v-model:show="isShowGiveBox" show-cancel-button :className="'give_pop'" :show-confirm-button="false" :show-cancel-button="false">
      <div class="give_pop_box">
        <div class="gpb_content">
          <h3>登录成功啦！</h3>
          <p>恭喜您获得<strong>3天体验版会员</strong><br>祝您使用愉快！</p>
          <div class="give_pop_btn" @click="isShowGiveBox = false;$router.push('/');">立即体验</div>
        </div>
        <i class="gpb_close_btn" @click="isShowGiveBox = false"></i>
      </div>
    </van-dialog> -->

    <!-- 扫码领取会员弹框 -->
    <van-dialog v-if="!$isZsjxApp" v-model="isShowQRCodeDialog" :showConfirmButton="false" :class="'give_qr_dialog'">
      <h3>新用户免费领取会员</h3>
      <div class="gq_qr"><img src="@/assets/img/zhangmei_qr.png" alt=""></div>
      <p>「微信扫码添加官方导师」</p>
      <h5>免费领取7天SVIP-个人版会员</h5>
      <ul class="fn_list">
        <li><i class="gq_icon1"></i><span>更多数据</span></li>
        <li><i class="gq_icon2"></i><span>更多资源管理</span></li>
        <li><i class="gq_icon3"></i><span>更多小工具</span></li>
        <li><i class="gq_icon4"></i><span>带货助手</span></li>
      </ul>
      <i class="gq_close_btn" @click="isShowQRCodeDialog = false"></i>
    </van-dialog>

    <!-- 注册成功弹框 --> 
    <van-dialog v-if="!$isZsjxApp" v-model="isShowShareSigninDialog" :showConfirmButton="false" :class="'signin_dialog'">
      <div class="ss_activate_btn" @click="getInviterCode"></div>
      <i class="ss_close" @click="isShowShareSigninDialog = false"></i>
    </van-dialog>
  </div>
</template>

<script>
// import VConsole from 'vconsole';
// let vConsole = new VConsole();
import PageLoading from '@/component/pageLoading.vue';
import ADFooter from '@/component/AD_footer.vue';
import { Loading } from 'vant';
export default {
  name: '',
  components: { PageLoading,ADFooter },
  data() {
    return {
      active: '',
      accountId: '',
      headImgUrl: '',
      code: '',
      photo: '',
      isShowApp: false,
      invitecode: this.urlPms.invitecode ? this.urlPms.invitecode : '', //邀请码
      userInvitecode:'',  //当前登录用户自己的邀请码
      // showAuthorize: false, //判断是否打开授权页面
      isShowGiveBox:false,  //是否弹出赠送会员弹框
      uLevel:'',
      isTerms : location.href.indexOf('/termsOfService') > -1 || location.href.indexOf('/privacyClause') > -1,  //  是否为隐私政策页面
      isShowQRCodeDialog: false,//  是否弹出二维码弹框
      isShowShareSigninDialog: false, //  是否弹出分享注册成功弹框
    };
  },
  watch: {
    $route(n) {
      let that = this;
      this.$popVip({
        obj: that.$router,
        show: false
      });
      if(!n.meta.alone){
        // 获取未读数据
        this.getUnreadMsgData();
      }
    }
  },
  created() {
    // 如果是电脑端打开，则跳到pc页面
    // console.log(this.timestamp(1637942400 - 1 * 86400, 'Y-M-D'));
    // console.log('是否在客户端内打开：'+this.$isZsjxApp);
    if (this.$isZsjxApp && !this.isTerms) {
      //如果是客户端内打开直接获取客户端的登录信息！！！！！！！！！！！！重要！！！！！！！！！！！！！
      let tokenStr = this.$getCookie('appToken');
      localStorage.setItem('user_id', tokenStr);
      this.uLevel = this.$getCookie('vipLevel');
      if(this.uLevel){  //新版本客户端传了level,
        localStorage.setItem('vipLevel', this.uLevel);
        this.initUser();
      }else{  //兼容老版本app，因为老版本没有传用户等级，需要前端自己从接口获取
        this.get_person().then((level)=>{ 
          this.uLevel = level;
          localStorage.setItem('vipLevel', this.uLevel);
          console.log('老版本h5获取用户等级：',level);
          this.initUser();
        });
      }
    } else {
      this.uLevel = localStorage.getItem('vipLevel');
      this.initUser();
    }
    this.$router.beforeEach((to, from, next) => {
      // pathName == '/privacyClause' ||
      // pathName == '/termsOfService' ||
      // pathName == '/getMember' ||
      // pathName == '/promote' || 
      // pathName == '/download' 
      if (to.meta.alone) {  //路由元信息定好的不走登录流程
        this.isGoPcFn();
        next();
      } else {
        this.isGoPcFn();
        let uid = localStorage.getItem('user_id');
        if (uid) {
          next();
        } else {
          let pms = {
            name: 'login',
            query:{ }
          }
          if (this.invitecode) {
            pms.query.invitecode = this.invitecode;
          }
          next(pms);
        }
      }
    });
  },
  mounted(){
    if(!this.$isZsjxApp && localStorage.getItem('user_id') && !this.isTerms){//  纯h5功能页才能调用（非客户端、非主流程页面、必须登录）
      // this.getVipDraw();
      this.getCustomerService().then(()=>{
        let isInvitationUser = localStorage.getItem('isInvitationUser');  //在手机号登陆或者微信绑定手机号时存储一个缓存标识
        if(isInvitationUser){ //是否弹出注册成功弹框
          this.isShowShareSigninDialog = true;
          localStorage.removeItem('isInvitationUser');  //弹出后立马清除缓存值
        }
      });
    }
  },
  methods: {
    // authorize(){ //授权按钮点击事件
    //   this.wx();
    //   // if(this.code){
    //   //   this.getWXInfo()
    //   // }
    // },
    getInviterCode(){ //获取当前用户邀请码
      this.$axios.get('/api/customer/GetInviterCode').then((res)=>{
        if(res.data.code == '0'){
          this.userInvitecode = res.data.data.invitecode;
          this.isShowQRCodeDialog = false;
          this.isShowShareSigninDialog = false;
          this.$router.push({path:'/invitation',query:{'invitecode':this.userInvitecode}});
        }
      });
    },
    getCustomerService() {  //是否为新注册用户
      return new Promise((resolve,reject)=>{
        this.$axios.get('/api/customer/GetCustomerService').then(res => {
          // code = 1 不弹  0 弹；
          this.isShowQRCodeDialog = !Boolean(res.data.code);
          resolve()
        });
      });
    },
    // getVipDraw() {  //是否为新注册用户并赠送3天svip
    //   this.$axios.get('/api/customer/getVipDraw').then(res => {
    //     // let isPopNotifyBox = localStorage.getItem('isPopNotifyBox');
    //     if(res && res.data && res.data.code == '0'){  // 首次注册进来弹出
    //       this.isShowGiveBox = true;
    //     }
    //   });
    // },
    isGoPcFn(){ //是否跳到pc
      let iCodeStr = this.invitecode ? '?invitecode=' + this.invitecode : ''; //如果有邀请码
      if (!this.$isMoblie) {
        //非移动端浏览器打开跳pc网页
        if (location.href.indexOf('://dy.zsjx114.com') > -1) {  //
          location.href = 'https://dy.zsjx114.com/' + iCodeStr;
        } else {
          location.href = 'https://test-dy.zsjx114.com/' + iCodeStr;
        }
      }
    },
    //   获取用户信息
    get_person() {
      return new Promise((resolve, reject) => {
        this.$axios.get('/api/customer/getperson')
        .then(res => {
          if (res.data.code == 0) {
            resolve(res.data.data.vipLevel);
          }
        })
        .catch(error => {
          reject(error);
          console.log(error);
        });
      });
    },
    initUser() {
      let uid = localStorage.getItem('user_id');
      if(uid && !this.isTerms){  //如果有token则说明有用户等级（用token判断比较准确）
        this.$getPower(this.uLevel).then(() => {
          this.isShowApp = true;
        });
      }else{
        this.isShowApp = true;
      }
    },
    wx() {
      // 获取code
      let APP_ID = 'wx3f218079525514d2';
      let SCOPE = 'snsapi_userinfo';
      let STATE = 'default';
      const local = location.href; // 获
      window.location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize' +
        '?appid=' +
        APP_ID +
        '&redirect_uri=' +
        encodeURIComponent(local) +
        '&response_type=code&scope=' +
        SCOPE +
        '&state=' +
        STATE +
        '#wechat_redirect' +
        '&connect_redirect=1'; //防止二次加载
    },
    GetParam() {
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
      }
      return theRequest;
    },
    getWXInfo() {
      return new Promise((resolve, reject) => {
        this.$axios({
          method: 'get',
          url: '/api/customer/wechatoauthlogin',
          params: {
            Code: this.code
          }
        })
          .then(res => {
            // let invitecode = this.$route.query.invitecode;
            // invitecode = invitecode?invitecode:'';
            if (res.data.code == 0) {
              // this.showAuthorize = false; //关闭授权页面
              this.user_id = res.data.data.accountId;
              this.photo = res.data.data.headImgUrl;
              localStorage.setItem('user_id', res.data.data.accountId);
              localStorage.setItem('photo', res.data.data.headImgUrl);
              localStorage.setItem('vipLevel', res.data.data.vipLevel);
              localStorage.setItem('phone', res.data.data.phone);
              localStorage.setItem('nickName', res.data.data.nickName);
              localStorage.setItem('autoVipType', res.data.data.autoVipType);
              localStorage.setItem('vipDuration', res.data.data.duration);
              // 会员到期时间
              if (res.data.data.vipLevel == '0') {
                localStorage.setItem('vipEndTime1', 0);
              } else {
                localStorage.setItem('vipEndTime1', res.data.data.vipEndTime1);
              }
              // resolve(res.data.data.vipLevel);
              location.reload();
            } else if (res.data.code == -7 || res.data.code == -5) {
              //-5未注册，-7未绑定手机号
              let msg = res.data.msg;
              let rPms = {
                path: '/loginweixin',
                query: { msg }
              };
              if (this.invitecode) {
                rPms.query.invitecode = this.invitecode;
              }
              this.$router.push(rPms);
            } else if (res.data.code == -6) {
              //-6用户状态错误
              let rPms = {
                path: '/login',
                query: {}
              };
              if (this.invitecode) {
                rPms.query.invitecode = this.invitecode;
              }
              this.$router.push(rPms);
            } else if (res.data.code == -3) {
              //-3token解析错误
              this.wx(); //重新获取
            }
            this.isShowApp = true;
          })
          .catch(err => {
            reject(err);
            console.log(err);
          });
      });
    },
    getUnreadMsgData(){
      this.$axios({
        method: 'get',
        url: '/api/customer/GetNoReadCouponCount',
      }).then(res => {
        if(res && res.data.code == '0'){
          // this.$store.commit('unreadMsg', res.data.data);
          this.$store.commit('unreadMsg', res.data.data);
        }
      });
    }
  }
};
</script>

<style lang="less">
.van-tabbar-item__text {
  margin-bottom: 4px;
  img {
    // display: block;
    height: 20px;
    display: block;
  }
}
.publicDialog {
  width: 8rem;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 0.266667rem;
  padding: 0.826667rem;
  .van-dialog__header {
    text-align: center;
    padding: 0;
    font-size: 0.48rem;
    font-weight: 600;
    color: #333333;
  }
  .van-dialog__message {
    font-size: 0.4rem;
    color: #666666;
  }
  .van-goods-action-button--danger {
    background: none;
  }
  .van-dialog__message {
    padding: 0.533333rem 0;
    line-height: 0.7rem !important;
  }
  .van-hairline--top {
    width: 3.2rem !important;
    height: 1.146667rem !important;

    border-radius: 0.133333rem !important;
    overflow: hidden;
    margin: auto;
    .van-button {
      width: 100%;
      height: 100%;
    }
  }
  .van-button__content {
    background-color: #fd7f2c;
  }
  .van-button__text {
    font-size: 0.4rem;
    font-weight: 600;
    color: #ffffff;
  }
}
#__vconsole .vc-switch {
  z-index: 222222;
}

// 改一些需要在app.vue中更改的样式 比如vant
@import './common/one.less';
@import './common/two.less';
@import './common/three.less';
@import './common/four';
.el-icon-loading,
.el-loading-text {
  color: #fd7f2c !important;
}
// .van-tabbar
.van-tabbar {
  z-index: 50 !important;
  height: 1.6rem;
  width: 10rem;
  // padding-bottom: 1.3889rem;
}
// 数字字体引入
@font-face {
  font-family: Dinpro-medium;
  src: url('./common/dinpro-medium.ttf');
}
//vant的NavBar和tab的样式
[class*='van-hairline']::after {
  border: none;
}
#app {
  // width: 10rem;
  // margin: 0 auto;
  min-height: 100vh;
}
input::placeholder {
  color: #b5b5b5 !important;
}
.van-nav-bar {
  height: 1.28rem;
  background-color: #ffffff;
}
.van-tab {
  & > span {
    line-height: 0.5rem;
  }
}
// 所有vant的tab浮动样式
.van-sticky {
  &.van-sticky--fixed {
    left: initial;
    right: initial;
    width: 10rem;
  }
}
//   固定tab
#liveRankRoot,
.hot_rank_box,
#goodsrank,
#talenrank,
#myheader,
#sh_wrap,
.chioce_box,
.moreEquity {
  .van-sticky--fixed {
    width: 10rem;
    left: initial;
    right: initial;
    // top: 1.29rem !important;
  }
  // tab
  .van-tab {
    // width:6rem;
    color: #888;
    font-size: 0.4rem;
    padding: 0 0.48rem;
  }
  .van-tab--active {
    color: #222 !important;
  }
  .van-tabs__line {
    // width: 0.533333rem !important;
    // height: 0.08rem !important;
    background: #fd7f2c !important;
  }
  .van-nav-bar__title {
    font-size: 0.426667rem;
    font-weight: 600;
    color: #222;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #e5e5e5;
    height: 1.16rem;
  }
  // .van-tab__text--ellipsis{
  //   white-space: nowrap;
  // }
}
.goods_page {
  // .van-sticky--fixed {
  //   top: 1.29rem !important;
  // }
  // tab
  .van-tab {
    color: #888;
    font-size: 0.4rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .van-tab--active {
    color: #222 !important;
    font-weight: bold;
  }
  .van-tabs__line {
    width: 0.533333rem !important;
    // height: 0.08rem !important;
    background: #fd7f2c !important;
  }
  .van-nav-bar__title {
    font-size: 0.426667rem;
    font-weight: 600;
    color: #222;
  }
  .van-tabs__wrap {
    height: 1.16rem;
  }
  .van-tab__text--ellipsis {
    overflow: initial;
  }
  // 覆盖vant折叠筛选样式
  .van-cell {
    font-size: 0.37rem;
    padding: 0.3rem 0 0.26rem;
    &::after {
      border-bottom: none;
    }
  }
  .van-collapse-item--border {
    &::after {
      right: 0;
      left: 0;
    }
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    font-size: 0.4rem;
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse-item {
    &:first-child {
      .van-cell {
        padding: 0 0 0.26rem;
      }
    }
  }
  .van-cell--clickable:active {
    background-color: transparent;
  }
}
* {
  //   touch-action: pan-y;
} //去除点击空白 控制台报错问题
.bodyOverflow {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}
.livingGif {
  display: inline-block;
  width: 0.24rem;
  line-height: 100%;
  position: relative;
  @keyframes myfirst1 {
    0% {
      height: 3px;
    }

    25% {
      height: 6px;
    }

    50% {
      height: 9px;
    }

    100% {
      height: 12px;
    }
  }

  @keyframes myfirst2 {
    0% {
      height: 2px;
    }

    25% {
      height: 4px;
    }

    50% {
      height: 6px;
    }

    100% {
      height: 8px;
    }
  }

  @keyframes myfirst3 {
    0% {
      height: 10px;
    }

    25% {
      height: 8px;
    }

    50% {
      height: 4px;
    }

    100% {
      height: 6px;
    }
  }

  span {
    background-color: #fff;
    display: inline-block;
    width: 0.04rem;
    height: 0.16rem;
    position: absolute;
    bottom: -0.08rem;
    border-top-left-radius: 0.0267rem;
    border-top-right-radius: 0.0267rem;
  }

  span:nth-of-type(1) {
    left: 0.08rem;
    animation: myfirst1 0.6s ease-in-out 0s infinite alternate;
  }

  span:nth-of-type(2) {
    left: 0.18rem;
    animation: myfirst3 0.6s ease-in-out 0s infinite alternate;
  }

  span:nth-of-type(3) {
    left: 0.28rem;
    animation: myfirst1 0.6s ease-in-out 0s infinite alternate;
  }
}
.van-tabbar-item--active {
  color: #fd7f2c !important;
}
.tg_authorizatio {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url('./assets/one/123.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 199;
  .tg_a_button {
    position: absolute;
    bottom: 3.226667rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 7.333333rem;
    height: 1.146667rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fd7f2c;
    border-radius: 0.133333rem;
    font-size: 0.4rem;
    color: #fff;
  }
  .tg_a_text {
    width: 100%;
    font-size: 0.346667rem;
    color: #888888;
    position: absolute;
    bottom: 0.733333rem;
    left: 0;
    text-align: center;
    .tg_a_clause {
      color: #fd7f2c;
    }
  }
}
// 榜单颜色
.van-dropdown-menu__title--active {
  color: #fd7f2c !important;
}
.van-dropdown-item__option--active {
  color: #fd7f2c !important;
}
.van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #fd7f2c !important;
}
.van-checkbox__icon--checked .van-icon {
  background-color: #fd7f2c !important;
  border-color: #fd7f2c !important;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #fd7f2c !important;
}
.blank_holder {
  //列表的空白占位
  height: 90vh;
}
.app_loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
// .van-overlay{
//   z-index: 1888 !important;
// }
// .van-dialog{
//   z-index: 1999 !important;
// }
.liveAnimation {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.4rem;
  height: 0.4rem;
  background-image: linear-gradient(90deg, #ff005a 1%, #ff31a5 100%),
    linear-gradient(#888888, #888888);
  background-blend-mode: normal, normal;
  border-radius: 0.053333rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
  span {
    display: block;
    margin: 0 1px;
    flex: 0 0 2px;
    height: 10px;
    background: #fff;
    margin-bottom: 3px;
    &:nth-child(1) {
      animation: liveAnimationSecond 750ms linear 0s infinite alternate;
    }
    &:nth-child(2) {
      animation: liveAnimationSecond 750ms linear 200ms infinite alternate;
    }
    &:nth-child(3) {
      animation: liveAnimationSecond 750ms linear 400ms infinite alternate;
    }
  }
}
van-number-keyboard {
  display: block;
}
// 筛选弹出样式
.van-cell--clickable {
  &:active {
    background-color: transparent;
  }
}
.isADFooter{
  padding-bottom: 1.86rem;
}
.give_pop{
  background-color: transparent !important;
  overflow: initial;
}
.give_pop_box{
  position: relative;
  box-sizing: border-box;
  width: 7.4533rem;
  height: 7.08rem;
  margin: 0 auto;
  padding: 1.45rem 1rem 0;
  background:url('./assets/img/give_bg.png') no-repeat center center;
  background-size: 100% 100%;
  .gpb_content{
    color: #2c303b;
    h3{
      font-size: .48rem;
    }
    p{
      font-size: .3733rem;
      margin-top: .3rem;
      line-height: .6133rem;
      strong{
        color: #844e1a;
      }
    }
    .give_pop_btn{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: .6rem;
      width: 4.0133rem;
      height: 1.08rem;
      line-height: 1.08rem;
      text-align: center;
      font-size: .4rem;
      color: #393d4a;
      font-weight: bold;
      background-image: linear-gradient(-30deg, 
        #fdbe82 0%, 
        #fec791 50%, 
        #ffcfa0 100%), 
      linear-gradient(
        #fd7f2c, 
        #fd7f2c);
      background-blend-mode: normal, 
        normal;
      box-shadow: 0px 0px .36rem 2px rgba(44, 48, 59, 0.6);
      border-radius: .5333rem;
    }
  }
  .gpb_close_btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.2rem;
    display: inline-block;
    width: .64rem;
    height: .64rem;
    background:url('./assets/img/give_close.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
// 扫码联系客服弹框
.give_qr_dialog{
  width: 7.9867rem;
  padding: .65rem 0 .5rem;
  border-radius: .2133rem;
  text-align: center;
  overflow: initial !important;
  h3{
    font-size: .48rem;
    letter-spacing: 1px;
    color: #222;
  }
  .gq_qr{
    width: 3.3333rem;
    height: 3.3333rem;
    margin: .48rem auto 0;
    img{
      width: 100%;
      height: 100%;
    }
  }
  p{
    margin-top: .0533rem;
    font-size: .32rem;
    letter-spacing: 1px;
    color: #666;
  }
  h5{
    font-size: .4rem;
    color: #fd7f2c;
    margin-top:.5067rem;
    padding-bottom: .1333rem;
    letter-spacing: 1px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 6.8rem 1px;
    background-image: url('~@/assets/img/give_line.png');
  }
  .fn_list{
    margin-top: .9333rem;
    display: flex;
    color: #888;
    font-size: .2933rem;
    li{
      flex: 1;
      i{
        display: inline-block;
        width: .4533rem;
        height: .4533rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &.gq_icon1{
          background-image: url('~@/assets/img/give_icon_1.png');
        }
        &.gq_icon2{
          background-image: url('~@/assets/img/give_icon_2.png');
        }
        &.gq_icon3{
          background-image: url('~@/assets/img/give_icon_3.png');
        }
        &.gq_icon4{
          background-image: url('~@/assets/img/give_icon_4.png');
        }
      }
      span{
        display: block;
        margin-top: 2px;
      }
    }
  }
  .gq_close_btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.2rem;
    display: inline-block;
    width: .64rem;
    height: .64rem;
    background:url('~@/assets/img/give_close.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
// 被邀请用户注册成功弹框
.signin_dialog{
  width: 8.5467rem;
  height: 9.6667rem;
  overflow: initial !important;
  background:url('/static/share_singin.png') no-repeat center center;
  background-size: 100% 100%;
  .ss_activate_btn{
    position: absolute;
    bottom: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.3733rem;
    height: 1.0133rem;
    background:url('~@/assets/img/pop_actived_btn.png') no-repeat center center;
    background-size: 100% 100%;
  }
  .ss_close{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.6rem;
    display: inline-block;
    width: .64rem;
    height: .64rem;
    background:url('~@/assets/img/give_close.png') no-repeat center center;
    background-size: 100% 100%;
  }
}
.demo-swipe-cell .delete-button{
  height:100%;
}
.van-swipe-cell__right{
  transform: translate3d(calc(100% + 2px),0,0);
}
.collent_toast{ //toast自定义样式
  .van-toast__text{
    display: flex;
    align-items: center;
    &::before{
      content: '';
      display: inline-block;
      width: .36rem;
      height: .36rem;
      background:url('~@/assets/img/no_power.png') no-repeat;
      background-size: 100% 100%;
      margin-right: .1333rem;
    }
  }
}
.van-tabbar-item .van-info{
  width: 10px;
  height: 10px;
  margin-top: 0;
  right: -2px;
  background-color: #fd7f2c;
}
@keyframes liveAnimationFirst {
  0% {
    height: 3px;
  }

  30% {
    height: 6px;
  }

  60% {
    height: 10px;
  }

  100% {
    height: 6px;
  }
}

@keyframes liveAnimationSecond {
  0% {
    height: 3px;
  }

  50% {
    height: 10px;
  }

  100% {
    height: 3px;
  }
}
</style>

